!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
